/**
 * Created by 69466 on 2018/9/13.
 */
import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { Button, Dialog, Text, View } from "react-native-ui-lib";
import { isIPhoneX } from "../../configs/platform";
import { commonStyles } from "../../configs/commonStyle";

export default class ConfirmDialog extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      data: {},
      content: "",
      showHeader: true,
    };
  }

  show = (content, title = "提示") => {
    this.setState({ isOpen: true, title, content });
  };

  dismiss = () => {
    this.setState({ isOpen: false });
  };

  renderPannableHeader = props => {
    const { title } = props;
    return (
      <View>
        <View margin-10 center>
          <Text style={{ ...commonStyles.text_black_18 }}>{title}</Text>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };


  render() {
    const { isOpen, showHeader, title } = this.state;
    const renderPannableHeader = showHeader ? this.renderPannableHeader : undefined;
    return (
      <Dialog
        migrate
        useSafeArea
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={"70%"}
        onDismiss={this.dismiss}
        renderPannableHeader={renderPannableHeader}
        pannableHeaderProps={{ title }}
      >
        <View padding-10>
          {
            this.state.content && <Text style={styles.content}>{this.state.content}</Text>
          }
        </View>
        <View row style={{ borderTopColor: "#eeeeee", borderTopWidth: 1 }}>
          <Button flex background-white labelStyle={{ color: "#666666" }} text14 label={"取消"} onPress={() => {
            this.dismiss();
            this.props.cancalClick && this.props.cancalClick();
          }} />

          <View style={{ backgroundColor: "#eeeeee", width: 1 }} />
          <Button flex label={"确定"} background-white labelStyle={{ color: "#F9D63B" }} text14
                  onPress={() => {
                    this.dismiss();
                    this.props.callBack && this.props.callBack();
                  }}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: "white",
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  content: {
    fontSize: 14,
    color: "#141414",
    lineHeight: 25,
    minHeight: 50,
    textAlign: "center",
  },
});


